<template>
  <el-container>
    <el-header height="40px">
      <header-bar />
    </el-header>
    <el-main>
      <splitpanes class="default-theme">
        <pane size="20" max-size="50">
          <connection-panel />
        </pane>
        <pane>
          <operation-panel />
        </pane>
      </splitpanes>
    </el-main>
    <el-footer height="32px">
      <el-icon>
        <info-filled />
      </el-icon>
      <span>{{ globalMsg }}</span>

      <div class="help-tip">
        <span>提示: </span>
        <span v-html="helpItems[helpTipIndex]"></span>
      </div>
    </el-footer>
  </el-container>
</template>
<script setup>
import OperationPanel from "@/components/OperationPanel.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import ConnectionPanel from "@/components/connection/ConnectionPanel.vue";
import { InfoFilled } from "@element-plus/icons-vue";
</script>

<script>
import { mapState } from "vuex";

export default {
  name: "App",
  data() {
    return {
      showProps: false,
      helpItems: [],
      helpTipIndex: 0,
      timer: -1
    };
  },
  computed: mapState({
    globalMsg: state => state.globalMsg
  }),
  mounted() {
    document.title = "WebDBM";
    window.addEventListener("keydown", e => {
      if (e.ctrlKey && (e.keyCode === 82 || e.code === "KeyR")) {
        e.preventDefault();
      }
    });
    this.$nextTick(() => {
      this.loadHelpItems();
      this.timer = setInterval(() => {
        if (this.helpTipIndex + 1 === this.helpItems.length) {
          this.helpTipIndex = 0;
        }
        else {
          this.helpTipIndex += 1;
        }
      }, 30000);
    });
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
  methods: {
    loadHelpItems() {
      const items = [];
      if (!this.$refs.help) {
        return items;
      }
      this.$refs.help.$el.querySelectorAll("li").forEach(li => {
        items.push(li.innerHTML);
      });
      this.helpItems = items;
    }
  }
}
</script>

<style lang="less">
html,
body {
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-main {
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  padding: 0 !important;
}

.el-footer {
  border-top: 1px solid #eeeeee;
}

.splitpanes.default-theme {
  height: 100%;
  width: 100%;

  .splitpanes__pane {
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .splitpanes__splitter {
    background-color: #f2f2f2;

    &:hover {
      background-color: #dddddd;

      &:before,
      &:after {
        background-color: #555555;
      }
    }
  }
}

.el-footer {
  font-size: 13px;
  padding-left: 5px;
  line-height: 32px;
}

.help-tip {
  float: right;
  padding-top: 3px;
}

.el-tabs.el-tabs--top {
  height: 100%;
  position: relative;

  >.el-tabs__content {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    padding: 0;

    >.el-tab-pane {
      height: 100%;
      box-sizing: border-box;
    }
  }
}
</style>
